<template>
  <div>
    <div id="ws-real-player" width="100%" height="700" />
  </div>
</template>

<script>
import PlayerManager from '@/utils/icc/PlayerManager';
const DHPlayer = new PlayerManager({
  el: 'ws-real-player',
  type: 'real' /** real - 实时预览  record - 录像回放 **/,
  maxNum: 1 /** 一个播放器上限能播放的路数，可根据实际情况设置，支持 1 4 9 16 25 **/,
  num: 1 /** 初始化，页面显示的路数 **/,
  showControl: false /** 是否显示工具栏，默认显示 **/,
  isIntranet: true, // 固定写死 true
  showRecordProgressBar: true, // 录像回放时，录像的进度条是否需要
  prefixUrl: '../dhPro', // 注意文件位置，必填
  importLoad: true, // 必填！！
  receiveMessageFromWSPlayer: (methods, data) => {
    /* 回调函数，可以在以下回调函数里面做监听 */
    switch (methods) {
      case 'initializationCompleted':
        DHPlayer.playRealVideo({
          channelList: [{}],
          streamType: 1, // {Number} 码流类型 1-主码流 2-辅码流
          windowIndex: 0 // {Number} 播放窗口序号（从0开始）
        });
        console.log(data); // 通道数据
        break;
      case 'realSuccess': // 实时预览成功
        console.log('实时预览成功');
        break;
      case 'realError': // 实时预览失败
        console.log('实时预览失败');
        break;
      case 'talkError': // 对讲失败
        console.log('对讲失败');
        break;
      case 'selectWindowChanged': // 选中的窗口发生改变
        console.log(data, '返回窗口信息');
        break;
      case 'windowNumChanged': // 播放器显示的路数发生改变
        console.log(data, '返回显示的窗口数量');
        break;
      case 'closeVideo': // 视频关闭回调
        // 点击关闭按钮引发的视频关闭进行提示
        // 切换视频引发的视频关闭不进行提示
        if (!data.changeVideoFlag) {
          console.log(`窗口${data.selectIndex}的视频已关闭`);
        }
        break;
      case 'statusChanged': // 视频状态发生改变
        break;
      case 'errorInfo': // 错误信息汇总
        console.log(data, '可打印查看错误消息');
    }
  }
});

export default {
  data() {
    return {
      queryForm: this.setQueryConfig(true).params,
      activeName: 'first',
      tableData: [{}],
      tableLoading: false,
      tableColumn: [
        {
          label: ''
        }
      ]
    };
  },

  methods: {
    /*
  rtspURL为接口返回数据
  格式如下：
	rtsp://10.10.8.5:9100/dss/monitor/param/cameraid=1002241%240%26substream=1?token=16348
  前端传参需要rtsp和ws地址，ws的地址就是rtsp后边带的这一串：10.10.8.5:9100
*/
    // rtsp://jy:jyadmin123@223.112.215.230:18080/cam/realmonitor?channel=1&subtype=0

    startPlayer(rtspURL) {
      const arr = rtspURL.match(/^rtsp:\/\/([^\/:]+)(:\d*)?/);
      const host = arr[1];
      const port = arr[2] || '';
      const wsStr = `ws://${host}${port}`;
      // console.log('?????拿到了吗', rtspURL, wsStr)
      this.player.realByUrl({
        playType: 'url', // 写死url
        rtspURL, // 必填
        wsURL: wsStr, // 必填
        // wsURL: "ws://119.36.17.241:9100",
        channelId: 'channelId', // 必传，通道id
        streamType: '1', // 1-主码流  2-辅码流 (可不传，默认主码流)
        selectIndex: '0',
        // playerAdapter: "selfAdaption",
        channelData: {
          // 建议传, 通道树信息
          // id: channelCode, // {String} 通道编码
          // deviceCode: deviceCode, // {String} 设备编码
          // deviceType: deviceType, // {String} 设备类型
          // channelSeq: channelSeq, // {String|Number} 通道序号
        } // 选传
      });
    }
  }
};
</script>

<style lang="scss">
// 表格上方查询区域
.searchBarWrap {
  background-color: #fff;
  padding: 18px 16px 10px;
  overflow: hidden;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 2%);
  // 折叠按钮
  .collapseButtonWrap {
    display: inline-block;
    user-select: none;
    color: rgba(0, 0, 0, 0.1);
    font-size: 18px;
    margin-top: -10px;
    margin-right: 10px;
    border-radius: 3px;
    cursor: pointer;
    i {
      transition: all 0.3s;
      &:hover {
        transform: scale(1.1);
        color: rgba(0, 0, 0, 0.5);
      }
    }
  }
  ::v-deep .el-form-item {
    margin-bottom: 12px !important;
  }
}

// 表格区域
.mainTableWrap {
  padding: 8px 16px 16px;
  box-sizing: border-box;
  background: #fff;
  margin-top: 6px;
  box-shadow: 0 10px 10px 0 rgb(0 0 0 / 2%);
  //表格上方按钮区域
  .mainTableWrap_buttonGroup {
    .el-button {
      margin-bottom: 8px;
    }
  }
}
.tabke_container {
  display: flex;
}
</style>
